angular-cli: ng build => Cannot read property 'provide' of null

Please provide us with the following information:

OS?

Win 10 x64

Versions.

angular-cli: 1.0.0-beta.24 node: 6.2.2 os: win32 x64 @angular/common: 2.4.1 @angular/compiler: 2.4.1 @angular/core: 2.4.1 @angular/forms: 2.4.1 @angular/http: 2.4.1 @angular/platform-browser: 2.4.1 @angular/platform-browser-dynamic: 2.4.1 @angular/router: 3.4.1 “typescript”: “^2.0.10” “angular-cli”: “^1.0.0-beta.24”,

Repro steps.

Was this an app that wasn’t created using the CLI? What change did you do on your code? etc. I updated from angular 2.0.1 and angular-cli 1.0.0-beta 18 (I assume…) to the latest angular and angular-cli versions

Mention any other details that might be useful.

I am not creating components to be used by others. This is what I did:

C:\temp\myapp>ng build Hash: 5b4b8769f714f025441e Time: 25174ms chunk {0} main.bundle.js, main.bundle.map (main) 133 kB {2} [initial] [rendered] chunk {1} styles.bundle.css, styles.bundle.map, styles.bundle.map (styles) 152 kB {3} [initial] [rendered] chunk {2} vendor.bundle.js, vendor.bundle.map (vendor) 3.63 MB [initial] [rendered] chunk {3} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

ERROR in Cannot read property 'provide' of null
 
ERROR in ./src/app/tests/list/tests-list.component.ts
Module not found: Error: Can't resolve 'tests-list.component.html' in 'C:\temp\myapp\src\app\tests\list'
 @ ./src/app/tests/list/tests-list.component.ts 33:22-64
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

ERROR in ./src/app/tests/list/tests-list.component.ts
Module not found: Error: Can't resolve 'tests-list.component.css' in 'C:\temp\myapp\src\app\tests\list'
 @ ./src/app/tests/list/tests-list.component.ts 34:21-62
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

AFTER ng build I did npm start to get maybe other errors whats going on:

Uncaught Error: Cannot find module "tests-list.component.html"
    at webpackMissingModule (tests-list.component.ts:8) [<root>]
    at :4200/main.bundle.js:1678:195 [<root>]
    at Object.684 (tests-list.component.ts:41) [<root>]
    at __webpack_require__ (bootstrap d782c45…:52) [<root>]
    at Object.669 (subject.ts:11) [<root>]
    at __webpack_require__ (bootstrap d782c45…:52) [<root>]
    at Object.679 (weightedgrade.ts:4) [<root>]
    at __webpack_require__ (bootstrap d782c45…:52) [<root>]
    at Object.543 (src async:7) [<root>]
    at __webpack_require__ (bootstrap d782c45…:52) [<root>]
    at Object.1181 (main.bundle.js:7) [<root>]
    at __webpack_require__ (bootstrap d782c45…:52) [<root>]
    at webpackJsonpCallback (bootstrap d782c45…:23) [<root>]
    at :4200/main.bundle.js:1:1 [<root>]
client?93b6:38[WDS] Errors while compiling.
client?93b6:80Cannot read property 'provide' of null
errors @ client?93b6:80
client?93b6:80./src/app/tests/list/tests-list.component.ts
Module not found: Error: Can't resolve 'tests-list.component.html' in 'C:\temp\myapp\src\app\tests\list'
resolve 'tests-list.component.html' in 'C:\temp\myapp\src\app\tests\list'
  Parsed request is a module
  using description file: C:\temp\myapp\package.json (relative path: ./src/app/tests/list)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: C:\temp\myapp\package.json (relative path: ./src/app/tests/list)
    resolve as module
      looking for modules in C:\temp\myapp\node_modules
        using description file: C:\temp\myapp\package.json (relative path: ./node_modules)
          Field 'browser' doesn't contain a valid alias configuration
        after using description file: C:\temp\myapp\package.json (relative path: ./node_modules)
          using description file: C:\temp\myapp\package.json (relative path: ./node_modules/tests-list.component.html)
            as directory
              C:\temp\myapp\node_modules\tests-list.component.html doesn't exist
            no extension
              Field 'browser' doesn't contain a valid alias configuration
              C:\temp\myapp\node_modules\tests-list.component.html doesn't exist
            .ts
              Field 'browser' doesn't contain a valid alias configuration
              C:\temp\myapp\node_modules\tests-list.component.html.ts doesn't exist
            .js
              Field 'browser' doesn't contain a valid alias configuration
              C:\temp\myapp\node_modules\tests-list.component.html.js doesn't exist
[C:\temp\myapp\node_modules\tests-list.component.html]
[C:\temp\myapp\node_modules\tests-list.component.html]
[C:\temp\myapp\node_modules\tests-list.component.html.ts]
[C:\temp\myapp\node_modules\tests-list.component.html.js]
 @ ./src/app/tests/list/tests-list.component.ts 33:22-64
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.ts
 @ multi main

Why does webpack think:

Cannot find module "tests-list.component.html"

that my html file is a module?

This is my angular-cli.json but I did not change it afer I updated to angular-/cli new versions:


{
  "project": {
    "version": "1.0.0-beta.24",
    "name": "tgb-ng2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css","../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [], 
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false
  }
}

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 15 (1 by maintainers)

Most upvoted comments

I had this error too. The problem was that my service was exported as default.

Wrong code:

my-service.ts:

@Injectable()
export default class MyService {
}

my-module.ts:

import MyService from "./my-service";
@NgModule({
    ...
    providers: [MyService]
    ...
})
export class MyModule {
}

Correct code:

my-service.ts:

@Injectable()
export class MyService {
}

my-module.ts:

import {MyService} from "./my-service";
@NgModule({
    ...
    providers: [MyService]
    ...
})
export class MyModule {
}

+34

amiram on Jan 23, 2017

Wel @bastienJS I did get rid of the error. I tried building it with the -aot option so ng build -aot This gave me more insights in what went wrong. The AoT-compilation does a lot more ahead of time (of course). I’m not sure this is correct but somewhere in the AoT-compilation errors it said that provides only could be of type Provide or Type, I registered a lot of services in my modules as just the service like this:

    // rest of the module declaration
    providers: [
        MyService,
        MyOtherService
    ]
    // rest of the module declaration

I changed all that with

    // rest of the module declaration
    providers: [
        { provide: MyService, useClass: MyService }
        { provide: MyOtherService, useClass: MyOtherService }
    ]
    // rest of the module declaration

I don’t know if this is the correct way, but this gave me errors that came after the Provide-error. So I was one step further. I had some problems with my routing too and stuff. The AoT-compilation doesn’t like it when using certain functions in the registration steps. I hope the -aot option helps you. I can build now with or without AoT but with is better of course.

yentheo on Jan 5, 2017

I think @amiram’s solution is the right one, and even though you are not using AoT I believe this error comes from it anyway.

That is because the build step always runs the AoT static analyzer, to ensure all code is AoT ready. This is a requirement on the CLI. It is meant to avoid certain classes of errors and ensure your app doesn’t break when/if you decide to publish it via AoT.

filipesilva on Jan 24, 2017

@amiram Thanks that truely worked!

bastienJS on Feb 13, 2017

I was getting this error for a couple of days, the build ends fine, everything seems to be working, but I still get the error in the console. In my case I fixed by switching the @NgModule from:

import Components, { AppComponent } from './components';

@NgModule({
    declarations: [
        Components,
        Pipes
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        AppRoutingModule,
        SharedModule
    ],
    providers: [
        Services,
        Guards
    ],
    bootstrap: [AppComponent]
})

import { Components, AppComponent } from './components';

@NgModule({
    declarations: [
        ...Components,
        ...Pipes
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule,
        AppRoutingModule,
        SharedModule
    ],
    providers: [
        ...Services,
        ...Guards
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Note the rest ... operator in the declarations and providers sections, and the import statements now have the {} since I am not using the default export anymore, which have been replaced in their folder’s index.ts files with:

export const Services = [
    DataService,
    AuthService,
    // more services
];

Now I ng build, ng serve, and even build --prod and --aot without errors.

javmeister on Jan 19, 2017