ng build => Cannot read property 'provide' of null

[bastienJS]

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
  }
}

[bastienJS]

This happens also with a fresh ng new 'myapp' and angular-cli beta24 and ng2.4.1

After adding "./" before each css and html file of the template and style url to my legacy app:

templateUrl: './administration-list.component.html',
styleUrls: ['./administration-list.component.css'],

1 error remains:

ERROR in Cannot read property 'provide' of null

🤕

Although I get this build error the app starts fine there is just that error in the console...

[vfedoriv]

Something like this #2977 ?

[bastienJS]

@vfedoriv IWhere do you see the connection between #2977 and my error? I do not use -aot or this path stuff anywhere.

[vfedoriv]

I just guess - it seems like aliases problem.
any provider have 'provide' property - too many variants of possible errors.

[yentheo]

I've got the exact same issue. I upgraded everything, I had to resolve all the paths to './component.html' instead of 'component.html'. But I'm left with the last error.
ERROR in Cannot read property 'provide' of null after an ng build.
Only that message, no stack-trace or nothing.
When running the application, it works fine too, I'm not even getting that error that you get. I only get it at compile time. Maybe it's because I think I am using AoT. I even think it's default now with angular-cli.

[bastienJS]

@yentheo cool that we have the some error that cheers me up 💃 I could also get rid of all errors only the

ERROR in Cannot read property 'provide' of null after an ng build.

is left!

[yentheo]

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.

[bastienJS]

@yentheo Just make it clear, I get that one provide build error, but my build finishes! And in the browser my app works. I will not touch AOT as this is a architectural decision not needed to decide about that.

[yentheo]

@bastienJS I'm not an advocate of AoT, I'm just saying that building it as AoT, you get a more specific error. I had the same error as you, I think the above solution solved that error. I fixed every error the AoT compile gave me, but maybe the above solution is enough to fix your provide error. My build now works for AoT and not AoT. If I were you, I'd just try it to fix the error you're getting.

[javmeister]

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]
})

to

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.

[zorikzaqaryan]

I have the same issue too. Application works fine, but in browser I get "ERROR in Cannot read property 'provide' of null" .
Any ideas ?

[amiram]

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 {
}

[filipesilva]

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.

[bastienJS]

@amiram Thanks that truely worked!