bricewilson / typescript-getting-started Goto Github PK

I'm in the module: Installing TypeScript and Configuring a Project

I'm on the video: Configuring Compiler Options in tsconfig.json

I got a build error when running 'yarn start' from webpack devserver when using the null assertion operator, to fix it I had to install ts-loader into my dev dependencies and then add ts-loader to my webpack config.

module.exports = {
entry: './app/app.ts',
devtool: 'inline-source-map',
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
module: {
rules: [{ test: /.tsx?$/, loader: 'ts-loader' }]
},
output: {
filename: 'bundle.js'
},
devServer: {
inline: false
}
};

Hi, I've been trying to run the program as shown in the course.

I first ran it with the dependencies in the versions they are here on this repo.
But When time came to run the application, this error showed up:

[webpack-cli] Unable to load '@webpack-cli/serve' command
[webpack-cli] TypeError: options.forEach is not a function
    at WebpackCLI.makeCommand (C:\Git\TypeScript-Getting-Started\node_modules\webpack-cli\lib\webpack-cli.js:108:21)

I did'nt know what this meant, but the dependencies were quite old, so I figured updating them could make sense.And they now look like this:

  "devDependencies": {
    "ts-loader": "9.4.1",
    "typescript": "4.8.4",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.11.1"
  }

I then ran npm install, tsc app\app.ts and npm start.
This does start the application like this:

> npm start   

> [email protected] start
> webpack serve

<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://10.10.110.162:8080/
<i> [webpack-dev-server] Content not from webpack is served from 'C:\Git\TypeScript-Getting-Started\public' directory
asset bundle.js 568 KiB [emitted] (name: main)
runtime modules 27.3 KiB 12 modules
modules by path ./node_modules/ 159 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 55.8 KiB 12 modules
  modules by path ./node_modules/webpack/hot/*.js 4.3 KiB
    ./node_modules/webpack/hot/dev-server.js 1.59 KiB [built] [code generated]
    ./node_modules/webpack/hot/log.js 1.34 KiB [built] [code generated]
    + 2 modules
  modules by path ./node_modules/html-entities/lib/*.js 81.3 KiB
    ./node_modules/html-entities/lib/index.js 7.74 KiB [built] [code generated]
    ./node_modules/html-entities/lib/named-references.js 72.7 KiB [built] [code generated]
    + 2 modules
  ./node_modules/ansi-html-community/index.js 4.16 KiB [built] [code generated]
  ./node_modules/events/events.js 13.8 KiB [built] [code generated]
./app/app.ts 243 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 1490 ms

But, when I now try to access http://localhost:8080/ in the browser, this is the only thing I get:

Cannot GET /

Wat is wrong?

Could you please provide the code snippets that you're using throughout the course?

Hi, great course but I found an issue. There is an inconsistency between the course video and the source code in github

The index.html element is scores, but the JS is looking for "postedscores"
I just realised the problem the master branch does not have the id on the element, some of the later branches do however.
You need to add the "postedScores" element to the master branch of index.html
postedScores

<div class="col-sm-offset-2 col-sm-10" id="scores">

the code in module "Demo: Adding Type Annotations and Default Parameter Values"
const scoreElement: HTMLElement | null = document.getElementById('postedscores');

Hi,
I've cloned master branch and when i start server and go to localhost/8080 it prompts for sign in.
what are credentials?
Thanks,
Mike

Hello Brice, I am having issue with your project. I actually cloned the repository as it is and following the video when it was time to see the changes in a browser I get this error when I enter the "npm start" step, what am i missing?