Angular on the road of the pit: A tentative study of Webpack

before the effort to install the angular development environment, the following days are in the angular Chinese official online reading documents, follow the heroic tutorial step by step operation, familiar with the angular some basic characteristics, this part did not encounter any major problems, but also relatively smooth. These two days in the official documents in the Webpack profile, want to follow the document to do it again, to see how to use Webpack packaging angular project, the results encountered some problems, because it is a beginner angular and webpack small white, these problems are difficult to solve, and spent a lot of time, Want to record here.

First, follow the document to add the relevant files to the project, the directory is like this:

Depending on the document in the root directory running NPM start, the result is a heap of errors:

One by one to solve it, first look at this error:

ERROR in [At-loader]./node_modules/@angular/common/src/platform_id.d.ts:8:42
Ts1039:initializers is not allowed in ambient contexts.

--The use of an initialization expression in the context of the environment is not allowed. What's the matter, for me this little white, only the internet search Help. In StackOverflow (https://stackoverflow.com/questions/43361702/ sample-webpack-angular4-application-throwing-errors/43442065) saw someone and I met the same problem, The accepted answer is that there is no problem with the 2.2.1 version of Typescript, and our Package.json file Typescript is 2.0.10 version, probably the version is too low, so I will package.json--> Devdependencies-->typescript changed to "~2.2.1", recompile once, found or wrong, but carefully look at the output, found that the use of Typescript or 2.0. Version 10:

So I deleted the typescript package and reinstalled it:

Now the version of Typescript is 2.4.2, then compiled, and there are new problems:

    ERROR in [At-loader]./node_modules/rxjs/subject.d.ts:16:22
    ts2415:class ' subject<t> ' incorrectly extends base Class ' Observable<t> '.
    Types of property ' lift ' is incompatible.
    Type ' <R> (operator:operator<t, r>) = Observable<t > ' isn't assignable to type ' <R> (operator:operator<t, r>) = Observable<r> '.
    type ' observable<t> ' is not assignable to Type ' Observable<r > '.
    type ' T ' is not assignable to type ' R '.

Then search the Internet, here (https://stackoverflow.com/questions/44793859/ Rxjs-subject-d-ts-error-class-subjectt-incorrectly-extends-base-class-obs) said that the 2.4.x version of Typescript would cause RXJS problems (" Typescript ":" ^2.3.4 "would match 2.4.1 and 2.4 is the version of theexposes the problem with RxJS. ）。 So I deleted the typescript bag, changed package.json-->devdependencies-->typescript to "2.2.1", re-installed the NPM install typescript [email Protected].

Continue NPM Start, the error is much less, the rest of the variables are not declared errors, I think the cause of them may be the same.

ERROR in [At-loader]./src/app/app.component.spec.ts:3:1
Ts2304:cannot find name ' describe '.

Almighty Overstakflow Ah, I found the answer! Poke here (Https://stackoverflow.com/questions/31173738/typescript-getting-error-ts2304-cannot-find-name-require), The answer to the recommended npm install @types/node--save-dev ，我 has actually installed the @types/node version is 6.0.84,

First, in the Tsconfig.json file, add

"Typeroots": [
".. /node_modules/@types "
]

To compile, there are 4 errors left:

I think it may be @types/node version of the problem, so removed the original installation of @types/node,npm install @types/node--save-dev installed @types/node8.0.14, compile, no error!

Running NPM Run build has also succeeded:

These errors bothered me for two or three days, because just started to learn angular and webpack, encountered problems themselves there is no solution to the direction, had to search the Internet. I found that StackOverflow is a very powerful website, can search for a lot of useful answers, I will pay more attention to this site in the future. In addition, do not know angular Chinese official website is a document update is not timely or other reasons, feel a lot of pits, according to do down there will appear some unexpected errors, wasted a lot of time, I think as a now so popular front-end framework, official documents written such a bit of defeat like ... This time I just found a solution to the problem, but why so resolved, the cause of the error is what I have not figured out, I intend to give up angular official website, to see some teaching video, starting from a simple project start, slowly in depth, slowly understand, or that sentence: The road long its repair far XI, I will go up and down and quest.

say one more word: hard record, reprint please indicate source.

Angular on the road of the pit: A tentative study of Webpack