ng build error - Module not found: Error: Can't resolve '(component-name).component.(html|css)'

[agatlin]

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?) Windows 10

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

angular-cli: 1.0.0-beta.22-1
node: 7.0.0
os: win32 x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

I am attempting to migrate over the completed (and working) Tour of Heroes app to use angular-cli as a prelude to migrating over an app presently under development.

The log given by the failure.

Normally this include a stack trace and some more information.

C:\Projects\ang-cli\toh>ng build
Hash: 9c9110fd5a7a2c9f1e81
Time: 5907ms
chunk    {0} main.bundle.js, main.bundle.map (main) 24.6 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 12.7 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.33 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'app.component.html' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/app.component.ts 19:22-51
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/app.component.ts
Module not found: Error: Can't resolve 'app.component.css' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/app.component.ts 20:21-49
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/dashboard.component.ts
Module not found: Error: Can't resolve 'dashboard.component.html' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/dashboard.component.ts 26:22-57
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/dashboard.component.ts
Module not found: Error: Can't resolve 'dashboard.component.css' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/dashboard.component.ts 27:21-55
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/heroes.component.ts
Module not found: Error: Can't resolve 'heroes.component.html' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/heroes.component.ts 58:22-54
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/heroes.component.ts
Module not found: Error: Can't resolve 'heroes.component.css' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/heroes.component.ts 59:21-52
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/hero-detail.component.ts
Module not found: Error: Can't resolve 'hero-detail.component.html' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/hero-detail.component.ts 45:22-59
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/hero-detail.component.ts
Module not found: Error: Can't resolve 'hero-detail.component.css' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/hero-detail.component.ts 46:21-57
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/hero-search.component.ts
Module not found: Error: Can't resolve 'hero-search.component.html' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/hero-search.component.ts 47:22-59
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/hero-search.component.ts
Module not found: Error: Can't resolve 'hero-search.component.css' in 'C:\Projects\ang-cli\toh\src\app'
 @ ./src/app/hero-search.component.ts 48:21-57
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

All of the [component-name].component.ts files have moduleId: module.id defined. Apparently, this is not working with the AOT in angular-cli.

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[eight-molecules]

Got these today moving up to Beta-22-1. This is the result of path requirements changing a little. Go to each of those files and add ./ before each template path, e.g. in app.component.ts your template path goes from 'app.component.html' to './app.component.html'. This applies to every mentioned template (HTML and CSS) in your log.

[agatlin]

@gelliott181, thank you so much for your guidance. It was a great help! It allowed the build process to complete. I really appreciate your sharing that tip.

C:\Projects\ang-cli\toh>ng build
Hash: ca7e2b77d9aa5e9e0a32
Time: 5984ms
chunk    {0} main.bundle.js, main.bundle.map (main) 30.3 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 12.7 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.33 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

After everything built, I thought it was my lucky day, so I decided to go ahead and launch the app. Yeah! Here we go!

C:\Projects\ang-cli\toh>ng serve
** NG Live Development Server is running on http://localhost:4200. **
Hash: 6913a42ec4719e776fd5
Time: 6374ms
chunk    {0} main.bundle.js, main.bundle.map (main) 30.3 kB {2} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.bundle.map (styles) 12.7 kB {3} [initial] [rendered]
chunk    {2} vendor.bundle.js, vendor.bundle.map (vendor) 2.56 MB [initial] [rendered]
chunk    {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]
webpack: bundle is now VALID.

Uh-oh! Unfortunately, it was not my lucky day. No Joy, Houston! No Joy! The app got stuck loading and threw a nasty little console error related to module id.

Uncaught Error: moduleId should be a string in "AppComponent". See https://goo.gl/wIDDiL for more information.
If you're using Webpack you should inline the template and the styles, see https://goo.gl/X2J8zc.
    at componentModuleUrl (http://localhost:4200/vendor.bundle.js:24954:15)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:4200/vendor.bundle.js:24306:25)
    at CompileMetadataResolver._loadDirectiveMetadata (http://localhost:4200/vendor.bundle.js:24242:42)
    at http://localhost:4200/vendor.bundle.js:24508:87
    at http://localhost:4200/vendor.bundle.js:24423:99
    at Array.map (native)
    at CompileMetadataResolver.loadNgModuleMetadata (http://localhost:4200/vendor.bundle.js:24423:68)
    at RuntimeCompiler._loadModules (http://localhost:4200/vendor.bundle.js:36514:41)
    at RuntimeCompiler._compileModuleAndComponents (http://localhost:4200/vendor.bundle.js:36484:35)
    at RuntimeCompiler.compileModuleAsync (http://localhost:4200/vendor.bundle.js:36474:21)

So, I quickly realized that I needed to remove the moduleId: module.id from every component declarations. Then everything worked like a charm. I guess it is my lucky day after all. :)

For anyone else who is migrating Tour of Heroes to work underangular-cli, you will need to:

1. Use the angular-cli to create a new project like ng new toh.
2. Delete all the files in the newly created /src/app directory in the newly created angular-cli project.
3. Copy over all the files from your app directory from your working tour of heroes app into the /src/app directory.
4. Prefix all of the html and css path locations in your [component-name].component.ts files with './'
5. Remove the moduleId: module.id from all component declarations.
6. Reference the angular-in-memory-web-api in the package.json created by angular-cli.
7. Run npm install to pull in the missing angular-in-memory-web-api file--which was not installed by default with angular-cli.
8. In the app.module.ts file, on the import statement for the InMemoryWebApiModule, remove the './' from the import path. (This is the opposite of what was done for prefixing the component html and css files.)
9. Change the selector in app.component.html to app-root instead of my-app.

I probably left out some steps but this covers most of them.

[HydTechie]

@agatlin - thank you somuch for detailing.. I could work without removing module.id, but made sure ./ prefix in template url as exampe: @Component({ moduleId: module.id, templateUrl: './login.component.html' })

[TuralAsgar]

@agatlin @gelliott181 Thanks. It took my hours to solve this problem at the end I came across this page thankfully.

[mryarbles]

This is a problem. I can't use relative paths because I'm doing localization on the server in the templates so all templates are root relative "/about-page" etc...

From the docs:

template - inline-defined template for the view templateUrl - url to an external file containing a template for the view

So why would templateUrl property need to resolve?

[imromec]

@gelliott181, Hey i added ./ but even after this it's giving same error.

`ERROR in ./src/app/components/nav.component.ts Module not found: Error: Can't resolve './app/views/nav.component.html' in '/Applications/XAMPP/xamppfiles/htdocs/customApp/src/app/components' @ ./src/app/components/nav.component.ts 36:22-63 @ ./src/app/app.module.ts @ ./src/main.ts @ multi main

ERROR in ./src/app/components/index.component.ts Module not found: Error: Can't resolve './app/views/index.component.html' in '/Applications/XAMPP/xamppfiles/htdocs/customApp/src/app/components' @ ./src/app/components/index.component.ts 18:22-65 @ ./src/app/app.module.ts @ ./src/main.ts @ multi main

ERROR in ./src/app/components/notification.component.ts Module not found: Error: Can't resolve './app/views/notification.component.html' in '/Applications/XAMPP/xamppfiles/htdocs/customApp/src/app/components' @ ./src/app/components/notification.component.ts 18:22-72 @ ./src/app/app.module.ts @ ./src/main.ts @ multi main

ERROR in ./src/app/components/register.component.ts Module not found: Error: Can't resolve './app/views/register.component.html' in '/Applications/XAMPP/xamppfiles/htdocs/customApp/src/app/components' @ ./src/app/components/register.component.ts 18:22-68 @ ./src/app/app.module.ts @ ./src/main.ts @ multi main`

[ghost]

just added component directly with out path.

@Component({ tempalteUrl: 'awsome.component.html' })

[malkyfaith]

I too wasted so much time in resolving such issues. finally I took the released version of cli and i think there are many unresolved issues with beta cli version. don't use it. Follow: https://angular.io/docs/ts/latest/cli-quickstart.html Verify that you are running at least node 6.9.x and npm 3.x.x by running node -v and npm -v in a terminal/console window. Older versions produce errors, but newer versions are fine.

[Nyarlat-hotep]

I had this error as well, I verified node and ng were up to date. I found the issue inside the ts file that was shown in the error message. In my case inside that ts file, where I specified the @component object I had the templateUrl wrong. I had ./home/home.component.html instead of ./home.component.html.

[angular-automatic-lock-bot[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.}