AOT Compiler looks for files in wrong path

[georgeedwards]

Please provide us with the following information:

OS?

Windows 10

Versions.

ng --version
(node:12872) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
angular-cli: 1.0.0-beta.10
node: 6.7.0
os: win32 x64

Repro steps.

No, but it is at https://github.com/georgeedwards/docs

1. clone source
2. checkout performance branch
3. cd client
4. ngc -p tsconfig-aot.json

The log given by the failure.

Normally this include a stack trace and some more information.

Error: Compilation failed. Resource file not found: C:/Users/George/Source/Repos/docs/client/components/home/client/components/home/home.html

Mention any other details that might be useful.

The home.html file is actually at C:/Users/George/Source/Repos/docs/client/components/home/home.html

---

Thanks! We'll be in touch soon.

[filipesilva]

We've only started to support AoT compilation in beta16/17 with the --aot flag in the serve and build commands (and it's still under testing). There was no support at all in beta.10.

[NiceGuyNimni]

I have the same issue in @angular/compiler-cli": "^2.1.2

Any ideas?

[skendrot]

Up?! Seeing this with 2.2.4

[skendrot]

Found this in the docs:

Component-relative Template URLS
The AoT compiler requires that @component URLS for external templates and css files be component-relative. That means that the value of @Component.templateUrl is a URL value relative to the component class file. For example, an 'app.component.html' URL means that the template file is a sibling of its companion app.component.ts file.

Ok, so that's fine. Instead of 'app/app.component.html you use app.component.html. But if you do this you can no longer debug the application because you will get an error that the file ~/app.component.html does not exist.

So, the docs say:

JiT-compiled applications that use the SystemJS loader and component-relative URLs must set the @Component.moduleId property to module.id. The module object is undefined when an AoT-compiled app runs. The app fails with a null reference error unless you assign a global module value in the index.html like this:

I have no idea what this means. There are no samples that show this. Where do you set moduleId? what is the id of the module?

[skendrot]

Thanks to Visual Studio go to definition, I found that an NgModule has an id?: string property. and that the Component has a moduleId?: string property.

@NgModule({
 id: 'MyApp',
 imports: [BrowserModule],
 declarations: [AppComponent ],
 bootstrap: [AppComponent ]
})

In the Component:

@Component({
 selector: 'my-app',
 moduleId: 'MyApp',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
})

Even with these changes, and adding window.module = 'aot'; to the script of the index page it still tries to get the html file relative to the host server

[skendrot]

Filed issue: angular/angular#13553

[baigali93]

Any solutions? I want to use JIT for development and AOT for production using SystemJS but have to manually add/remove the __moduleName property for both.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}