Remove `System.import()` usage in favor of `import()`

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

Currently Angular core makes use of a System.import() call to load templates (html/css) and lazy modules:

https://github.com/angular/angular/blob/3bcc0e6f765f86ce96dbb33edf4ba0cbc53b3322/packages/core/src/linker/system_js_ng_module_factory_loader.ts#L67-L70

In the past System.import was expected to become a standard, but import() was settled upon instead.

Modern tooling is beginning to deprecate (notably Webpack 4 https://github.com/webpack/webpack/pull/6321) System.import() detection in favor of the standard and it should not be unexpected that more follow suit.

Expected behavior

The standard import() is used, so that tooling that supports code splitting can detect it.

Minimal reproduction of the problem with instructions

The SystemJS loader can be found at https://github.com/angular/angular/blob/master/packages/core/src/linker/system_js_ng_module_factory_loader.ts.

What is the motivation / use case for changing the behavior?

Remain compatible with modern tooling.

Environment

Angular version: 2, 4 and 5

/cc @hansl @bradlygreen @IgorMinar @robwormald

[PKief]

I use a parser rule in my webpack configuration to disable the warning:

{
    // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
    // Removing this will cause deprecation warnings to appear.
    test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
    parser: { system: true },  // enable SystemJS
}

https://webpack.js.org/configuration/module/#rule-parser

[psrebrny]

In Angular 7 this warning wan’t resolved